<template>
  <el-dialog class="edit-password" title="旅游产品信息" append-to-body :close-on-click-modal="closeOnclickModal"
             width="800px" top="3.8vh" :visible.sync="isDialogShow" @close="close">
    <el-form :model="dialogForm" ref="dialogForm" :size="size" label-width="100px">
      <el-form-item :rules="yh_rules({required:true})" label="标题" prop="title">
        <el-input v-model="dialogForm.title" placeholder="请输入标题" clearable />
      </el-form-item>
      <el-form-item :rules="yh_rules({required:true})" label="产品描述" prop="description">
        <el-input v-model="dialogForm.description" placeholder="请输入描述" clearable />
      </el-form-item>
      <el-form-item :rules="yh_rules({required:true})" label="旅游地点" prop="place">
        <el-input v-model="dialogForm.place" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item :rules="yh_rules({required:true})" label="旅游路线" prop="route">
        <el-input v-model="dialogForm.route" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item :rules="yh_rules({required:true})" label="旅游天数" prop="travelDays">
        <el-input v-model="dialogForm.travelDays" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item :rules="yh_rules({required:true})" label="价格(元)" prop="price">
        <el-input type="number" v-model="dialogForm.price" placeholder="请输入价格" clearable />
      </el-form-item>
      <el-form-item :rules="yh_rules({required:true})" label="产品类别" prop="type">
        <el-select v-model="dialogForm.type" placeholder="请选择">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :rules="yh_rules({required:true})" label="vip折扣" prop="vipDiscount">
        <el-input-number  v-model="dialogForm.vipDiscount" :min="1" :max="10" placeholder="请输入折扣" clearable />
      </el-form-item>
      <el-form-item :rules="yh_rules({required:true})" label="是否上架" prop="sale">
        <el-radio v-model="dialogForm.sale" :label="true">是</el-radio>
        <el-radio v-model="dialogForm.sale" :label="false">否</el-radio>
      </el-form-item>
      <el-form-item :rules="yh_rules({required:true})" label="产品图片" style="position: relative">
        <el-upload
          ref="upLoadMasterSeal"
          :limit="5"
          action="/travel/picture/uploadPic"
          :file-list="file_list"
          :on-success="uploadSuccess"
          list-type="picture-card"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <span class="infoTips" style="position: absolute; bottom: -25px; color: #f56c6c; left: 0px">*最多只能上传5张</span>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="close" :size="size">取消</el-button>
      <el-button type="primary" @click="submit" :size="size">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {mapGetters} from 'vuex'
  import api from '@/utils/api.js'
  export default {
    name: 'EditTravelModal',
    components: {

    },
    props: {
      travelDialogShow: {
        type: Boolean,
        default: false
      },
      travelInfo: {
        type: Object
      }
    },
    data () {
      return {
        isDialogShow: false,
        dialogForm: {
          title: '',
          description: '',
          price: '',
          travelDays: '',
          route: '',
          vipDiscount: '',
          place: '',
          sale: true,
          type: '',
          pictureIdList: []
        },
        file_list: [],
        typeList: []
      }
    },
    computed: {
      ...mapGetters(['size', 'closeOnclickModal', 'zhiXiaShi']),
    },
    watch: {
      travelDialogShow (newValue) {
        this.isDialogShow = newValue
        if (newValue && this.travelInfo.infoId) {
          api.getTravelInfoDetail({infoId: this.travelInfo.infoId}).then(res => {
            Object.assign(this.dialogForm, res.data)
            this.setFileList()
          })
        }
      }
    },
    created() {
      this.getTravelType()
    },
    methods: {
      getTravelType() {
        api.getTravelType().then(res => {
          this.typeList = Object.keys(res.data).map(key => {
            return {
              value: key,
              label: res.data[key]
            }
          })
        })
      },
      setFileList() {
        this.file_list = this.dialogForm.pictrueList.map(item => {
          return {url: `${window.SITE_CONFIG['baseUrl']}${item.path}`}
        })
      },
      // 提交
      submit () {
        let apiFunc
        if (this.dialogForm.infoId) {
          apiFunc = api.updateTravelInfo
        } else {
          apiFunc = api.addTravelInfo
        }
        this.$validateSubmit('dialogForm').then(() => {
          apiFunc(this.dialogForm).then(res => {
            this.$message.success('操作成功')
            this.$emit('refreshData')
            this.close()
          })
        })
      },
      uploadSuccess(res) {
        let {data} = res
        this.dialogForm.pictureIdList.push(data.pictureId)
      },
      handleRemove(res) {
        if (res.response) {
          let {pictureId} = res.response.data
          this.dialogForm.pictureIdList = this.dialogForm.pictureIdList.filter(id => id !== pictureId)
        }
      },
      close () {
        this.dialogForm = {
          title: '',
          description: '',
          price: '',
          vipDiscount: '',
          place: '',
          route: '',
          travelDays: '',
          sale: '1',
          type: '',
          pictureIdList: []
        }
        this.file_list = []
        this.$emit('update:travelDialogShow', false)
      },
    }
  }
</script>
